<div class="header">
  <div #mainLogo class="top-dnd-backing">
    <div class="topper"></div>
    <div class="well well-lg drop-message center-align"  *ngIf="dragAndDropService.isDragging">
      <h5>Drop file(s) here!</h5>
      <br />
      <span class="spinner-loading-message" [innerHTML]="dragAndDropService.message"></span>
    </div>
    <div class="logo no-outline" (click)="webService.webView.loadURL('https://sidequestvr.com');" routerLink="webview"></div>
    <div class="header-title" #header><img src="assets/images/logo-textual.png" class="responsive-img"/></div>
    <div class="apk-install" *ngIf="!appService.showBrowserBar&&!appService.showCustomActions&&!appService.isFilesOpen">Drag and drop your APK/OBB files <br>over this message to install!</div>
    <div class="apk-install" *ngIf="appService.isFilesOpen">Drag and drop your files over this message to upload them to the current folder.<br>Special thanks to <app-link url="https://twitter.com/Mitch_s3" text="@Mitch"></app-link></div>
    <div class="apk-install" *ngIf="appService.showCustomActions">Special thanks to
      <app-link url="https://github.com/trishume/QuestSaberPatch" text="@trishume"></app-link>,
      <app-link url="https://github.com/ATechAdventurer" text="@ATechAdventurer"></app-link>,<br>
      <app-link url="https://www.reddit.com/u/drewbaumann/" text="@drewbaumann"></app-link>,
      <app-link url="https://www.reddit.com/u/motokochan/" text="@motokochan"></app-link>
      and of course
      <app-link url="https://bsaber.com/members/elliotttate/" text="@elliotttate"></app-link>
      for beat saber efforts.
    </div>
  </div>
  <div class="title-menu-container">
    <!--<img mz-tooltip-->
         <!--(click)="openBeatOn()"-->
         <!--class="material-icons no-outline beaton-icon"-->
         <!--src="{{beatonService.beatOnEnabled?'assets/images/beaton.png':'assets/images/beatoff.png'}}"-->
         <!--position="bottom" tooltip="BeatOn mods & custom songs on Beat Saber"/>-->
    <i mz-tooltip (click)="selectAppToInstall()" class="material-icons white-text no-outline" position="bottom" tooltip="Install APK file from folder.">
      archive
    </i>
    <i mz-tooltip (click)="adbModal.openModal()" class="material-icons white-text no-outline" position="bottom" tooltip="Run ADB commands">
      input
    </i>
    <i mz-tooltip *ngIf="false" (click)="wifiModal.openModal()" class="material-icons no-outline" [ngClass]="{'green-text':adbService.wifiEnabled,'white-text':!adbService.wifiEnabled}" position="bottom" tooltip="Enable Wireless mode. ( Experimental ) ">
      wifi
    </i>
    <!--<i routerLink="custom-levels" mz-tooltip class="material-icons white-text no-outline" position="bottom" tooltip="Beast Saber Custom Levels">-->
      <!--queue_music-->
    <!--</i>-->
    <i routerLink="packages" mz-tooltip class="material-icons white-text no-outline" position="bottom" tooltip="Currently Installed Apps">
      apps
    </i>
    <i routerLink="tasks" mz-tooltip class="material-icons white-text no-outline" position="bottom" tooltip="Running {{processService.left_length}} tasks.">
      playlist_add_check
    </i><span routerLink="tasks" mz-tooltip *ngIf="processService.left_length" position="bottom" tooltip="Running {{processService.left_length}} tasks." class="process-badge pink-button">{{processService.left_length>100?'99+':processService.left_length}}</span>
    <i id="device-settings" routerLink="tools" mz-tooltip class="material-icons white-text no-outline" position="bottom" tooltip="Device Settings & Tools">
      build
    </i>
    <i (click)="openDebugger()" id="open-debugger" mz-tooltip class="material-icons white-text " position="bottom" tooltip="Open Debugger">
      bug_report
    </i>
    <i *ngIf="appService.currentTheme === 'light'" (click)="appService.currentTheme = 'dark'" id="day-mode" mz-tooltip class="material-icons white-text no-outline" position="bottom" tooltip="Dark theme.">
      brightness_2
    </i>
    <i *ngIf="appService.currentTheme === 'dark'" (click)="appService.currentTheme = 'light'"  id="night-mode" mz-tooltip class="material-icons white-text no-outline" position="bottom" tooltip="Light theme.">
      brightness_5
    </i>
    <i (click)="minimizeApp()" mz-tooltip class="material-icons white-text no-outline" position="bottom" tooltip="Minimize the app to the taskbar.">
      minimize
    </i>
    <i (click)="maximizeApp()" mz-tooltip class="material-icons white-text no-outline" position="bottom" tooltip="Maximize the app to fill your screen.">
      aspect_ratio
    </i>
    <i (click)="closeApp()" mz-tooltip class="material-icons white-text no-outline" position="bottom" tooltip="Close the app.">
      close
    </i>
  </div>
  <div
    id="connection-status"
    class="connection-status-unauthorized"
    [ngClass]="getConnectionCssClass()"
    mz-tooltip
    position="bottom"
    tooltip="{{ isConnected() ? 'Battery: ' + adbService.batteryLevel + '%' : 'No device is currently connected'}}">
    <div id="connection-status-message">v{{appService.versionName}}&nbsp;&nbsp;{{adbService.deviceStatusMessage}}</div>
  </div>
  <div *ngIf="appService.showRepo" (click)="addRepoModal.openModal()" class="waves-effect waves-light btn-flat add-repo small-button white-text">
    Add Repo
  </div>
  <app-link *ngIf="appService.updateAvailable" class="waves-effect waves-light btn-flat update-available link small-button"
            (click)="updateAvailable()" text="Update Available"></app-link>
  <div *ngIf="appService.showBrowserBar" class="beast-saber-buttons">
    <a class="waves-effect waves-light synthrideerz" (click)="webService.loadUrl('https://synthriderz.com/beatmaps/recent')">
      <img src="assets/images/Synth.png" class="responsive-img"/></a>&nbsp;&nbsp;&nbsp;
    <!--<a class="waves-effect waves-light btn-flat no-outline small-button white-text" (click)="webService.loadUrl('https://sidequestvr.com/#/account')">-->
      <!--Dashboard</a>&nbsp;&nbsp;&nbsp;-->
    <!--<a *ngIf="beatonService.beatOnEnabled&&adbService.deviceIp" class="waves-effect waves-light btn-flat no-outline small-button white-text" (click)="webService.loadUrl('http://'+adbService.deviceIp+':50000')">-->
      <!--Beat On</a>&nbsp;&nbsp;&nbsp;-->
    <!--<a class="waves-effect waves-light btn-flat no-outline small-button white-text" (click)="webService.loadUrl('https://bsaber.com')">-->
      <!--Beast Saber</a>&nbsp;&nbsp;&nbsp;-->
    <!--<a class="waves-effect waves-light btn-flat no-outline small-button white-text" (click)="webService.loadUrl('https://beatsaver.com/browse/latest')">-->
      <!--Beat Saver</a>&nbsp;&nbsp;&nbsp;-->
    <!--<a routerLink="custom-levels" class="waves-effect waves-light btn pink-button no-outline small-button">-->
    <!--<i class="material-icons left">queue_music</i>My Downloads</a>-->
  </div>
  <div *ngIf="appService.isFilesOpen" class="beast-saber-buttons">
    <a class="waves-effect waves-light synthrideerz" (click)="appService.filesComponent.open('/sdcard/Android/data/com.kluge.SynthRiders/files/CustomSongs/')">
      <img src="assets/images/Synth.png" class="responsive-img"/></a>&nbsp;&nbsp;&nbsp;
    <!--<a class="waves-effect waves-light btn-flat no-outline small-button white-text" (click)="webService.loadUrl('https://sidequestvr.com/#/account')">-->
    <!--Dashboard</a>&nbsp;&nbsp;&nbsp;-->
    <!--<a *ngIf="beatonService.beatOnEnabled&&adbService.deviceIp" class="waves-effect waves-light btn-flat no-outline small-button white-text" (click)="webService.loadUrl('http://'+adbService.deviceIp+':50000')">-->
    <!--Beat On</a>&nbsp;&nbsp;&nbsp;-->
    <!--<a class="waves-effect waves-light btn-flat no-outline small-button white-text" (click)="webService.loadUrl('https://bsaber.com')">-->
    <!--Beast Saber</a>&nbsp;&nbsp;&nbsp;-->
    <!--<a class="waves-effect waves-light btn-flat no-outline small-button white-text" (click)="webService.loadUrl('https://beatsaver.com/browse/latest')">-->
    <!--Beat Saver</a>&nbsp;&nbsp;&nbsp;-->
    <!--<a routerLink="custom-levels" class="waves-effect waves-light btn pink-button no-outline small-button">-->
    <!--<i class="material-icons left">queue_music</i>My Downloads</a>-->
  </div>
  <div class="sync-songs" *ngIf="appService.showTaskActions">
    <div
      class="waves-effect waves-light btn small-button pink-button"
      mz-tooltip
      position="bottom"
      tooltip="Clear out the finished items." (click)="processService.clearDone()">
      Clear Done
    </div>
    &nbsp;&nbsp;
    <div
      class="waves-effect waves-light btn small-button pink-button"
      mz-tooltip
      position="bottom"
      tooltip="Restart the failed items." (click)="processService.retryFailed()">
      Retry Failed
    </div>
    &nbsp;&nbsp;
    <div
      class="waves-effect waves-light btn small-button pink-button"
      mz-tooltip
      position="bottom"
      tooltip="Clear out the failed items." (click)="processService.clearFailed()">
      Clear Failed
    </div>
    &nbsp;&nbsp;

  </div>
  <div class="sync-songs" *ngIf="appService.showCustomActions">
    <span class="beat-saber-version"></span>&nbsp;&nbsp;
    <div
      class="waves-effect waves-light btn small-button pink-button"
      mz-tooltip
      position="bottom"
      tooltip="Open your custom levels folder." (click)="appService.openFolder(folder.BSABER)">
      Open Songs Folder
    </div>
    &nbsp;&nbsp;
    <div
      class="waves-effect waves-light btn small-button pink-button"
      mz-tooltip
      position="bottom"
      tooltip="Manage your APK and Data backups." routerLink="packages/com.beatgames.beatsaber">
      Backups
    </div>
    &nbsp;&nbsp;
    <div
      class="waves-effect waves-light btn small-button pink-button"
      mz-tooltip
      position="bottom"
      tooltip="Sync your songs to beat saber." (click)="beatonService.setupBeatOnSocket(this.adbService);beatonService.syncSongs(adbService)">
      Sync to Beat On
    </div>
    &nbsp;&nbsp;
    <div
      class="waves-effect waves-light btn small-button pink-button"
      mz-tooltip
      position="bottom"
      tooltip="Build a new beat saber APK and install these songs." (click)="openSyncSongs()">
      Sync Songs
    </div>
  </div>
  <div id="browser-bar" *ngIf="appService.showBrowserBar">
    <a class="btn-floating waves-effect waves-light browser-button browser-back-button pink-button" (click)="webService.back()">
      <i class="material-icons">keyboard_arrow_left</i>
    </a>&nbsp;&nbsp;
    <a class="btn-floating waves-effect waves-light browser-button browser-forward-button pink-button" (click)="webService.forward()">
      <i class="material-icons">keyboard_arrow_right</i>
    </a>
    <div class="input-field inline browser-input">
      <input id="web_address" class="input-dark-theme white-text" type="text" [(ngModel)]="webService.currentAddress" placeholder="Address" />
      <label class="active label-dark-theme" for="web_address">
        Address
      </label>
    </div>
    <a class="btn-floating waves-effect waves-light browser-button browser-send-button pink-button" (click)="webService.send()">
      <i class="material-icons">send</i>
    </a>
    <app-loading-spinner-small *ngIf="webService.isWebviewLoading" class="browser-loading"></app-loading-spinner-small>
  </div>
  <div id="searchFilterContainer" *ngIf="appService.showSearch">
    <div class="search" *ngIf="false">
      <div class="input-field inline search-box">
        <input id="searchBox" class="input-dark-theme" type="text" />
        <label for="searchBox" class="active label-dark-theme">
          Search
        </label>
      </div>
      <a class="waves-effect waves-dark btn search-button-margin white black-text">search</a>
      <a class="waves-effect waves-dark btn search-button-margin white black-text" (click)="selectAppToInstall()">Pick APK/OBB</a>
    </div>
    <div class="filters" style="display: none">
      <div class="input-field inline filter ">
        <select id="filterDropdown">
          <option>All</option>
        </select>
      </div>
    </div>
  </div>
</div>


<mz-modal #addRepoModal [fixedFooter]="true">
  <mz-modal-header>
    <h4>Add F-Droid Repo</h4>
  </mz-modal-header>
  <mz-modal-content>
    A repo url usually looks something like this -
    <div class="chip">https://example.com/fdroid/repo/</div>
    <br />
    <div class="input-field repo-url">
      <input id="repoUrl" type="text" [(ngModel)]="addrepoUrl"/>
      <label for="repoUrl">Repo Url</label>
    </div>


  </mz-modal-content>
  <mz-modal-footer>
    <button mz-button [flat]="true" mz-modal-close>Close</button>
    <button mz-button class="pink-button" mz-modal-close (click)="addRepo()">Add Repo</button>
  </mz-modal-footer>
</mz-modal>



<mz-modal #wifiModal [fixedFooter]="true">
  <mz-modal-header>
    <h4>Wireless Mode</h4>
  </mz-modal-header>
  <mz-modal-content>
    <div class="center-align">
      Enable wifi mode to install apps wirelessly.<br>
      <div class="chip">Experimental</div>
      <br><br><br>
      <i mz-tooltip class="material-icons large cursor" [ngClass]="{'green-text':adbService.wifiEnabled}" (click)="adbService.wifiEnabled=!adbService.wifiEnabled;adbService.toggleWifiMode()" position="bottom" tooltip="Enable Wireless mode. ( Experimental ) ">
        wifi
      </i>
      <br /><br>
      <div class="switch cursor">
        <label>
          Off
          <input type="checkbox" [(ngModel)]="adbService.wifiEnabled" (change)="adbService.toggleWifiMode()" />
          <span class="lever"></span>
          On
        </label>
      </div>
      <br>
      <br>
      <div>
        <h5>Device IP:</h5>
        {{adbService.deviceIp}}<br>
        <a class="waves-effect waves-dark btn search-button-margin white black-text"  (change)="adbService.connect()">Connect</a>
      </div>
    </div>
  </mz-modal-content>
  <mz-modal-footer>
    <button mz-button [flat]="true" mz-modal-close>Close</button>
  </mz-modal-footer>
</mz-modal>

<mz-modal #adbModal [fixedFooter]="true">
  <mz-modal-header>
    <h4>Run ADB Command</h4>
  </mz-modal-header>
  <mz-modal-content>
    Run an ADB command from here to be able to see the output. Use this to troubleshoot issues or perform advanced operations. Please note wireless ADB is not supported but we provide the following example commands for you to experiment with.
    <br><br>
    To enable wifi click "Enable Wifi ADB" then "Connect to Wifi ADB" and finally disconnect your usb cable.
    <br><br>
    <div class="chip pointer purple white-text"
         mzTooltip tooltip="adb tcpip 5555" position="bottom"
         (click)="adbCommandToRun = 'adb tcpip 5555';runAdbCommand()">Enable Wifi ADB</div>
    <div *ngIf="adbService.deviceIp"
         mzTooltip tooltip="adb connect {{adbService.deviceIp}}:5555" position="bottom"
         class="chip pointer purple white-text"
         (click)="adbCommandToRun = 'adb connect '+adbService.deviceIp+':5555';runAdbCommand()">Connect to Wifi ADB</div><br><br>
    <div class="chip pointer green white-text"
         mzTooltip tooltip="adb devices" position="bottom"
         (click)="adbCommandToRun = 'adb devices';runAdbCommand()">List Devices</div>
    <div class="chip pointer blue white-text"
         mzTooltip tooltip="adb usb" position="bottom"
         (click)="adbCommandToRun = 'adb usb';runAdbCommand()">Enable USB ADB</div>
    <div class="chip pointer orange white-text"
         mzTooltip tooltip="adb disconnect" position="bottom"
         (click)="adbCommandToRun = 'adb disconnect';runAdbCommand()">Disconnect Everything</div>
    <div class="chip pointer orange white-text"
         mzTooltip tooltip="adb kill-server" position="bottom"
         (click)="adbCommandToRun = 'adb kill-server';runAdbCommand()">Reset ADB</div>
    <div class="button-section">
      <div class="input-field">
        <input id="adbCommand"  type="text" [(ngModel)]="adbCommandToRun" placeholder="Command To Run..."/>
      </div>
      <code>
        <pre *ngIf="adbResponse">
          {{adbResponse}}
        </pre>
      </code>
    </div>
    <br><br>
  </mz-modal-content>
  <mz-modal-footer>
    <button mz-button [flat]="true" mz-modal-close>Close</button>
    <button mz-button class="pink-button" (click)="runAdbCommand()">Run Command</button>
  </mz-modal-footer>
</mz-modal>


<mz-modal #syncSongsModal [fixedFooter]="true">
  <mz-modal-header>
  </mz-modal-header>
  <mz-modal-content>
    <h4>QuestSaberPatch - Support Removed</h4>
    Due to the recent update of Beat Saber to version 1.2.0 this patcher version is no longer supported. You will now have to use the BeatOn method to patch custom songs onto Oculus Quest. Please click Open BeatOn below to get started.
    <br><br>
    <!--<div *ngIf="bsaberService.hasBackup">-->
      <!--<div class="row">-->
        <!--<div class="col s6">-->

          <!--<h4>QuestSaberPatch</h4>-->
          <!--We will now attempt to patch your beat saber APK file with the custom levels selected. This process is experimental and can break so we do not accept any liability for any losses incurred. Please make a backup of your APK file and data files before you begin - this way you can restore things if something goes wrong.-->
          <!--<br><br>-->
          <!--This patch uses the kind efforts of trishume and also some work done by emulamer. For more information please visit https://github.com/trishume/QuestSaberPatch. Note that they don't provide support so please don't ask them for help with any issues.-->
          <!--<br><br>-->
        <!--</div>-->
        <!--<div class="col s6">-->
          <!--<h4>Saber Colors</h4>-->
          <!--Set the colors of your sabers in game.<br>-->
          <!--<div class="btn waves-effect waves-light right" (click)="resetColor(true)">Reset A</div>-->
          <!--<div class="btn waves-effect waves-light" [(colorPicker)]="colorA" [cpPositionRelativeToArrow]="true"-->
               <!--cpOutputFormat="rgba" cpAlphaChannel="disabled" cpPosition="bottom" [style.backgroundColor]="colorA">Color A</div>-->
          <!--<br><br>-->
          <!--<div class="btn waves-effect waves-light right" (click)="resetColor(false)">Reset B</div>-->
          <!--<div class="btn waves-effect waves-light" [(colorPicker)]="colorB" [cpPositionRelativeToArrow]="true"-->
               <!--cpOutputFormat="rgba" cpAlphaChannel="disabled" cpPosition="bottom" [style.backgroundColor]="colorB">Color B</div>-->
          <!--<br><br>-->
          <!--<h4>Replace Game Text</h4>-->
          <!--Set some text in game - <app-link url="https://github.com/sc2ad/QuestModdingTools/blob/master/BeatSaberLocale.txt" text="full list" [isDark]="true"></app-link>.-->
          <!--<br><br>-->
          <!--<div class="row">-->
            <!--<div class="col s4">Key</div>-->
            <!--<div class="col s4">Value</div>-->
          <!--</div>-->
          <!--<div class="row">-->
            <!--<div class="col s8"><hr></div>-->
          <!--</div>-->
          <!--<div class="row" *ngFor="let text of replaceText">-->
            <!--<div class="col s4">-->
              <!--<input class="input-light-theme" type="text" [(ngModel)]="text.key" placeholder="Key" />-->
            <!--</div>-->
            <!--<div class="col s4">-->
              <!--<input class="input-light-theme" type="text" [(ngModel)]="text.value" placeholder="Value" />-->
            <!--</div>-->
            <!--<div class="col s4">-->
              <!--<div class="btn btn-floating waves-effect waves-light red" (click)="removeText(text)"><i class="material-icons">close</i></div>-->
            <!--</div>-->
          <!--</div>-->
          <!--<div class="row">-->
            <!--<div class="col s4">-->
              <!--<input class="input-light-theme" type="text" [(ngModel)]="addkey" placeholder="Key" />-->
            <!--</div>-->
            <!--<div class="col s4">-->
              <!--<input class="input-light-theme" type="text" [(ngModel)]="addvalue" placeholder="Value" />-->
            <!--</div>-->
            <!--<div class="col s4">-->
              <!--<div class="btn waves-effect waves-light" (click)="replaceText.push({key:addkey,value:addvalue});addkey='';addvalue='';">Add</div>-->
            <!--</div>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->
    <!--<div *ngIf="!bsaberService.hasBackup">-->
      <!--No backup of beat saber made. Please make a backup now!-->
    <!--</div>-->
  </mz-modal-content>
  <mz-modal-footer>
    <button mz-button [flat]="true" mz-modal-close>Close</button>
    <button mz-button class="pink-button" mz-modal-close (click)="beatOnModal.openModal()">Open BMBF</button>
    <!--<button *ngIf="bsaberService.hasBackup" mz-button class="pink-button" mz-modal-close (click)="patchBeatSaber()">Run Patcher</button>-->
    <!--<button *ngIf="!bsaberService.hasBackup" mz-button class="pink-button" mz-modal-close (click)="bsaberService.backupNewMaster()">Make Backup</button>-->

  </mz-modal-footer>
</mz-modal>


<mz-modal #installAPKModal [fixedFooter]="true">
  <mz-modal-header>
    <h4>Patch Completed - Now Install the Custom Song APK</h4>
  </mz-modal-header>
  <mz-modal-content>
    Below is the results of the patch process. If it shows that some songs were skipped you may need to investigate why. In some cases we have seen `.ogg` files renamed to `.egg` files and these need to be fixed in the songs to get them to patch.
    <br><br>
    Patch Results:
    <div *ngIf="qspResponse">
      <div *ngIf="qspResponse.presentLevels&&qspResponse.presentLevels.length"> <b>Current Levels:</b><br>{{(qspResponse.presentLevels||[]).join(', ')}}<br></div>
      <div *ngIf="qspResponse.installedLevels&&qspResponse.installedLevels.length"> <b>New Levels:</b><br>{{(qspResponse.installedLevels||[]).join(', ')}}<br></div>
      <div *ngIf="installSkippedLength()"> <b>Skipped Levels:</b><br>{{getInstallSkipped()}}<br></div>
    </div>

  </mz-modal-content>
  <mz-modal-footer>
    <button mz-button [flat]="true" mz-modal-close>Close</button>
    <button mz-button class="pink-button" mz-modal-close (click)="installPatchedAPK()">Install APK</button>
  </mz-modal-footer>
</mz-modal>


<mz-modal #autoFixModal [fixedFooter]="true">
  <mz-modal-header>
    <h4>Patch Error - Let's get you fixed!</h4>
  </mz-modal-header>
  <mz-modal-content>
    It looks like there was an error patching your Beat Saber APK file. This can be frustrating but there are some options to get you going again.
    We have added a troubleshooting section to the tools screen with information and guided solutions to fix the most common issues.
    These are quick solutions and only take a few minutes. Feel free to connect with us on <app-link url="https://discord.gg/r38T5rR" [isDark]="true" text="Discord"></app-link> to say hello and get support.
    <br><br>Thank you!
  </mz-modal-content>
  <mz-modal-footer>
    <button mz-button class="pink-button" mz-modal-close routerLink="tools">Open Tools</button>
    <button mz-button [flat]="true" mz-modal-close>Close</button>
  </mz-modal-footer>
</mz-modal>

<mz-modal #beatOnModal [fixedFooter]="true">
  <mz-modal-header>
    <h4>
      <a class="small-button waves-effect waves-light btn search-button-margin pink-button right"
         (click)="appService.opn('https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=CRKPPSJ4MUS3J&source=url')">
        Support BeatOn on Paypal
      </a>
      BeatOn
    </h4>
  </mz-modal-header>
  <mz-modal-content>
    <!--<div class="center-align" *ngIf="isAliveChecking">-->
      <!--<br><br>-->
      <!--<app-loading-spinner-small></app-loading-spinner-small>-->
      <!--<br>-->
      <!--<h4>Connecting...</h4>-->

    <!--</div>-->
    <!--<div class="center-align" *ngIf="!isAlive&&!isAliveChecking">-->
      <!--<h4>Cant see headset...</h4>-->
      <!--Were sorry but your headset and PC must be on the same Wi-Fi, we tried to ping your headsets IP {{adbService.deviceIp}} and got no response.-->
      <!--You will need to make sure that your PC and headset are on the same Wi-Fi network to setup BeatOn, for initial-->
      <!--installation of BeatOn you must be plugged in as well as on the same Wi-Fi connection so it may read and save the-->
      <!--IP to ping wirelessly from now on, also check if your headset is asleep, Thank you for using SideQuest and BeatOn-->
      <!--<br><br>-->
      <!--<a class="waves-effect waves-light btn search-button-margin pink-button small-button no-wrap"-->
         <!--(click)="pingHeadset()">Try Again</a>-->
    <!--</div>-->
    <div class="center-align" >
      <!--*ngIf="isAlive&&!isAliveChecking"-->
      WARNING: BeatOn is no longer supported and may be removed from SideQuest soon.
      <br>
      <br>
      <br>
      <img class="cursor" src="{{beatonService.beatOnEnabled?'assets/images/beaton.png':'assets/images/beatoff.png'}}" (click)="beatonService.beatOnEnabled = !beatonService.beatOnEnabled;toggleBeatOn()"/>
      <br><app-loading-spinner-small *ngIf="beatOnLoading"></app-loading-spinner-small>
      <div>
        <div class="row">
          <div class="col s4 left-align padding-top">
            <div *ngIf="beatonService.beatOnEnabled">
              BeatOn PID: {{beatonService.beatOnPID}}<br>
              <div *ngIf="beatonService.beatOnStatus">
                BeatOn Status: {{beatonService.beatOnStatus.CurrentStatus === 'ModInstalled' ? 'Installed' : 'Not Installed'}}<br>
                Beat Saber Installed: {{beatonService.beatOnStatus.IsBeatSaberInstalled? 'Yes' : 'No'}}
                <div *ngIf="beatonService.UpgradeRestoreAvailable"><br>BeatOn Restore Available!! Click Restore BeatOn!!</div>
              </div>
            </div>
          </div>
          <div class="col s4 padding-top">
            <div class="switch cursor">
              <label>
                Off
                <input type="checkbox" [(ngModel)]="beatonService.beatOnEnabled" (change)="toggleBeatOn()" />
                <span class="lever"></span>
                On
              </label>
            </div>
          </div>
          <div class="col s4 right-align padding-top">
            <div *ngIf="beatonService.beatOnEnabled">
              <h5 *ngIf="!bsaberService.hasBackup && !beatonService.beatOnStatus.IsBeatSaberInstalled"> Please Install beat saber from the Oculus Store on your headset!</h5>
              <div *ngIf="beatonService.beatOnStatus.CurrentStatus === 'ModInstalled'">
                <a class="waves-effect waves-light btn search-button-margin pink-button small-button no-wrap"
                   (click)="beatOnModal.closeModal();router.navigateByUrl('webview');webService.loadUrl('http://'+adbService.deviceIp+':50000');">
                  Open BeatOn
                </a><br><br>
              </div>
              <div *ngIf="beatonService.beatOnStatus.CurrentStatus !== 'ModInstalled' && beatonService.beatOnStatus.IsBeatSaberInstalled">
                <a class="waves-effect waves-light btn search-button-margin pink-button small-button no-wrap"
                   (click)="beatonService.setupBeatOn(adbService);beatOnModal.closeModal();">
                  Install BeatOn
                </a><br><br>
              </div>
              <div *ngIf="bsaberService.hasBackup">
                <a class="waves-effect waves-light btn search-button-margin pink-button small-button no-wrap"
                   (click)="beatOnModal.closeModal();installBaseAPK()">
                  Reset BeatSaber
                </a><br><br>
              </div>
              <div *ngIf="!bsaberService.hasBackup && beatonService.beatOnStatus.IsBeatSaberInstalled">
                <a class="waves-effect waves-light btn search-button-margin pink-button small-button no-wrap"
                   (click)="beatOnModal.closeModal()"
                   routerLink="packages/com.beatgames.beatsaber">
                  Backup BeatSaber
                </a>
              </div>
              <div *ngIf="beatonService.UpgradeRestoreAvailable">
                <a class="waves-effect waves-light btn search-button-margin pink-button small-button no-wrap"
                   (click)="confirmRestore();beatOnModal.closeModal();">
                  Restore BeatOn
                </a><br><br>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </mz-modal-content>
  <mz-modal-footer>
    <button mz-button [flat]="true" mz-modal-close>Close</button>
  </mz-modal-footer>
</mz-modal>
